<template>
  <div>
    <el-container>
      <el-main>
        <div>
          <el-row :gutter="10">
            <el-col :span="10">
              <img src="01.png" style="width: 100%;height: 100%;" >
            </el-col>
            <el-col :span="14">
              <el-menu @select="selectMenu" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <el-row>
                  <el-col :span="24">
                    <el-menu-item index="1"><h2 style="font-family: 微软雅黑">用户登录</h2></el-menu-item>
                  </el-col>
                </el-row>
              </el-menu>
              <el-form v-if="menu==1" style="width: 100%;height: 100%;">
                <h2>欢迎登陆</h2>
                <el-form-item label="用户名">
                  <el-input v-model="loginEmp.username" clearable type="text" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密&#12288;码">
                  <el-input v-model="loginEmp.password" clearable show-password @keydown.enter="login" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button @click="login" :disabled="loginEmp.agree==false" type="primary">登陆</el-button>
                </el-form-item>
                <el-form-item>
                  <el-checkbox @click="loginAgree">阅读并接受<a href="#">《用户协议》</a></el-checkbox>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>

import {ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import router from "@/router";

const loginEmp=ref({agree:false})
const menu=ref(1)
const selectMenu = (index) => {
  menu.value=index
}
const login = () => {
  console.log(loginEmp.value)
  if (!loginEmp.value.agree){
    ElMessage.error("请先阅读并同意用户协议")
    return
  }
  axios.post(BASE_URL+'/v1/employee/login',loginEmp.value)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success("登陆成功")
          router.push('/empHome')
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const loginAgree = () => {
  loginEmp.value.agree=!loginEmp.value.agree
}

</script>

<style scoped>

</style>